<template>
  <div class="headerbox">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{ username }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import { useRouter } from 'vue-router';
const username=ref();
onMounted(()=>{
  if(window.sessionStorage.getItem("admininfo")!=null){
    username.value=window.sessionStorage.getItem("admininfo");
  }
});
const logout=()=>{
  window.sessionStorage.removeItem("admininfo");
  router.push({ path: "/" });
};
const router=useRouter();
</script>

<style scoped>
.headerbox{
    text-align: right;
    height: 50px;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}
.el-dropdown-link{
    cursor: pointer;
    margin-top: 20px;
}
.el-dropdown-link:focus{
  outline: none;
}
</style>